import React, { useEffect } from "react";
import * as echarts from "echarts";
const Index = () => {
  const EXS = () => {
    const chartDom = document.getElementById("main");
    const myChart = echarts.init(chartDom);
    let option;

    // eslint-disable-next-line prefer-const
    option = {
      tooltip: {
        trigger: 'item'
      },

      series: [
        {
          type: 'pie',
          radius: '80%',
          data: [
            { value: 648, name: 'H5' },
            { value: 735, name: '表单' },
            { value: 580, name: '海报' },
            { value: 180, name: '海报' },
            { value: 484, name: '互动' },
            { value: 300, name: ' 视频' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          labelLine: {
            length: 5,   // 指示线的长度
            length2: 0   // 第二段的长度
          },
        }
      ]
    };

    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    option && myChart.setOption(option);
  };
  useEffect(() => {
    EXS();
  }, []);
  return (
    <div>
      <div id="main" style={{ width: "440px", height: "200px" }}></div>
    </div>
  );
};

export default Index;